<template>
	<view class="container-order">
		<navbar :config="config" backColor="#000"></navbar>
		<view class="top" :style="{'top': sticky + 'px'}">
			<view class="tabs">
				<view class="tab" :class="{'activeTab': currentTab == index}" v-for="(item, index) in tabs"
					:key="item.i" @click="changeTab(index)">
					<view class="">{{item.label}}</view>
					<image :src="imgUrl+'/career/xuxianLine.png'" 
					v-if="index!=tabs.length-1"
					class="xuxianLineClass"></image>
				</view>
			</view>
		</view>
		<view style="height: 90rpx;"></view>
		<view class="list" v-if="list.length">
			<z-order-list :list="list" :isMine="true"></z-order-list>
			<u-loadmore :status="status" />
		</view>
		<noData v-if="list.length<=0" class="noDataTop"></noData>
	</view>
</template>

<script>
	import zOrderList from '@/pages/workbench/z-order-list.vue';
	import noData from "@/components/noData/nodata.vue"
	export default {
		components: {
			zOrderList,
			noData
		},
		data() {
			return {
				imgUrl: this.$mConfig.staticUrl,
				config: {
					back: true,
					title: '订单列表',
					color: '#000',
					backgroundColor: [1, "#fff"],
					statusBarFontColor: '#1A1A1A',
					leftSlot: true,
					backIconColor: "#000",
				},
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				sticky: uni.getSystemInfoSync().statusBarHeight + 44,
				tabs: [{
						id: '-1',
						i: 0,
						label: '全部'
					},
					{
						id: '0',
						i: 1,
						label: '待评价'
					},
					{
						id: '1',
						i: 2,
						label: '已评价'
					}
				],
				currentTab: 0,
				list: [],
				comment: '-1',
				params: {
					page: 1,
					limit: 10
				},
				totalPage: 0,
				currPage: 1,
				refresh: false,
				status: 'more',
			}
		},
		onShow() {
			this.getOrderlist(true)
		},
		onPullDownRefresh() {
			this.getOrderlist(true)
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			if (this.currPage == this.totalPage) {
				return this.status = 'nomore';
			} else {
				this.getOrderlist(false)
			}
		},
		methods: {
			changeTab(i) {
				if (this.currentTab == i) {
					return false
				}
				this.currentTab = i
				this.comment = this.tabs[i].id
				this.getOrderlist(true)
			},
			getOrderlist(refresh) {
				this.params.page = refresh ? 1 : this.params.page
				if (this.currPage == this.totalPage) {
					this.status = 'nomore';
				}
				this.$http.get('/offlineorder/my_page', {
					comment: this.comment,
					...this.params
				}).then(res => {
					if (res.code == 200) {
						if (this.params.page == 1) this.list = []
						this.list = [...this.list, ...res.page.list]
						this.totalPage = res.page.totalPage
						this.currPage = res.page.currPage
						this.params.page++
						if (this.currPage == this.totalPage) return this.status = 'nomore';
					}
				})
			},
			orderDetail() {
				uni.navigateTo({
					url: `/pages/workbench/order/detail`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container-order {
		.top {
			position: fixed;
			width: 100%;
			height: 85rpx;
			font-size: 32rpx;
			border-bottom: 1rpx solid #f2f2f2;
			color: #474747;
			z-index: 9;

			.tabs {
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 85rpx;
				background: #FFFFFF;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				

				.tab {
					line-height: 90rpx;
					height: 100%;
					font-weight: 400;
					font-size: 27rpx;
					color: #999999;
					line-height: 27rpx;
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					position: relative;
					// position: relative;
					// &::after {
					// 	content: '';
					// 	position: absolute;
					// 	top: 38rpx;
					// 	left: 150rpx;
					// 	width: 1rpx;
					// 	height: 20rpx;
					// 	background-color: #AAAAAA;
					// 	// background: #ffffff;
					// }
				}
				
				// .tab:last-child {
				// 	&::after {
				// 		content: none;
				// 	}
				// }

				.activeTab {
					color: #FF211F;
				}
			}
		}

		.list {
			padding: 0 30rpx 100rpx;

			.order-item {
				height: 130rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #f2f2f2;

				.item-info {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #808080;

					.order-num {
						margin-bottom: 10rpx;

						.num {
							color: #1A1A1A;
						}
					}

					.order-time-price {
						font-size: 24rpx;

						.time {
							margin-right: 89rpx;
						}
					}
				}

				.item-icon {
					width: 32rpx;
					height: 32rpx;
					transform: rotate(-90deg);
					flex-shrink: 0;
				}
			}
		}
	}
	.noDataTop{
		margin-top: 60rpx;
	}
	.xuxianLineClass{
		width: 2rpx;
		height: 27rpx;
		position: absolute;
		right: 0;
	}
</style>